<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=yes">

    <meta content="telephone=yes,email=yes" name="format-detection">
    <!--//自动识别电话号码和邮箱-->

    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--//苹果手机：会删除默认的工具栏和菜单栏，网站开启对web app程序的支持-->
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <!--//苹果手机：在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。-->
    <meta name="apple-touch-fullscreen" content="yes"/>
    <!--//苹果手机：如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示-->
    <link rel="apple-touch-icon" href="images/HTML5_Badge_64.png"/>
    <!--//苹果手机：将应用添加到手机主屏幕，会有一个icon可以直接进入-->
    <title>有收入</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!--初始化样式-->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/UploadImg.css">
    <!--共用样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--整个网站的局部样式-->
    <link rel="stylesheet" href="css/style.css">
    <!--适配样式-->
    <link rel="stylesheet" href="css/styleMedia.css">
    <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
    <style>
        html, body {
            position: relative;
            overflow-x: hidden;
        }
    	.loading {
    		position: fixed;
    		background: #F4BC56;
    		padding-top: 60%;
    		width: 100%;
    		height: 100%;
    		opacity: 0.6;
    		text-align: center;
    		z-index: 1000;
    		display: none;
    	}

        img{
		    width:100%;
		    height:auto;
	    }
	    .overlay{
		    background-color:#efefef;
		    opacity: 0.97;
		    filter:alpha(opacity=97);
		    position: fixed;
		    top:0;
		    left:0;
		    width:100%;
		    height:100%;
		    z-index: 10;
		    }
		    .overlayimg{
		    /*position: absolute;*/
		    z-index: 11;
		    left:0;
		    top:0;
	        position: fixed;
    	}
    </style>

</head>
<body style="background-color: #f4f9fd;">
	<div id="loading" class="loading">
		<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>
	</div>
<!--header begin-->
<header>
    <div id="flexHeader">
        <div class="div1 mui-action-back"><a><img src="images/icon_arrow_left.png"></a></div>
        <div class="div2">操作任务</div>
        <div class="div3"></div>
    </div>
</header>
<!--header end-->

<!--Shop name begin-->
<article class="shop-name height-padding">
    <p id="shopName">店铺名称</p>

</article>
<!--shop name end -->

<!--Merchant merchandise begin-->
<article class="merchant-merchandise ">
    <div class="businessId">目标商品</div>
    <main>
        <div><img id="goods1Pic" src="images/img_commodity.png"></div>
        <aside>
            <div id="goodsName">商品名称</div>
            <div>搜索展示价格：<span id="phonePrice1">79元</span></div>
            <div><span>普通浏览+加购物车</span></div>
        </aside>
    </main>
</article>
<!--Merchant merchandise end-->

<!--Task points begin-->
<article class="task-points">
    <p>任务要点</p>
</article>
<!--Task points end-->

<!--task-points-content begin-->
<article class="task-points-content-main">
    <div>
        <p>任务编号</p>
        <p id="orderId">2345254</p>
    </div>
    <div>
        <p>搜索关键词</p>
        <p id="keyword">关键词</p>
    </div>
    <div>
        <aside>
            <a id="copy" href="#">复制关键词并打开淘宝</a>
        </aside>
    </div>
    <div>
        <p>排序方式</p>
        <p id="sortMethod">综合排序</p>
    </div>
    <div>
        <p>所在地区</p>
        <p id="goodsAddr">全国</p>
    </div>
    <div>
        <p>价格区间</p>
        <p id="jiagequjian">无需筛选价格</p>
    </div>
</article>
<!--task-points-content end-->

<!--Task points begin-->
<article class="task-points">
    <p>商家要求(长按课选择-复制)</p>
</article>
<!--Task points end-->

<article class="task-points-content">
    <div>
        <p>无</p>
    </div>
</article>

<!--Task points begin-->
<article class="task-points">
    <p>注意事项</p>
</article>
<!--Task points end-->

<article class="task-points-content-main">
    <div class="matters-needing-attention-div">
        <aside class="matters-needing-attention out-to-the-top">
            <p><span>手机浏览任务：</span>手机浏览任务：即通过商家给出的关键词搜索找到目标商品， 并对此商品从上到下进行至少2分钟的浏览任务！过程中必须 分别截图 </p>
            <p>1.搜索结果页:必须显示搜索关键词和目标商品</p>
            <p>2.目标商品的头部</p>
            <p>3.目标商品的尾部(目标商品尾部在“看了又看”上方)并上传完 成任务。</p>
        </aside>
    </div>
</article>
<article class="task-points-content-main ">
    <div class="matters-needing-attention-div">
        <aside class="matters-needing-attention">
            <p><span> 浏览+收藏任务：</span>是手机浏览任务的升级版，即完成目标商品 浏览任务后，再进行 </p>
            <p>1.收藏目标商品</p>
            <p>2.将目标商品加入购物车</p>
            <p>3.收藏店铺，然后分别在商品收藏夹，购物车，收藏店铺里有 显示目标商品和店铺的页面截图并上传。</p>
        </aside>
    </div>
</article>

<!--The goods are compared to the three begin-->
<form action="" method="post" id="imgform" >
<article class="goods-compared-three">
    <section>操作步骤</section>
    <section>
        <p>1.请确认使用已绑定的账号登录淘宝</p>
        <p>2.点击搜索框粘贴指定的关键词</p>
        <p>3.对搜索结果页面截一张图</p>
        <p>4.根据商品主图、价格、名称等找到目标商品，点击进入店铺</p>
        <p>5.点开店铺里任意2到2个商品，分别截图，商品需要慢慢滑动到详情底部 </p>
        <p>6.返回到目标商品详情页，从头到尾慢慢浏览，停留至少3分钟，并在页面头部和底部时分别截图</p>
        <p>7.收藏店铺、收藏目标商品，并对宝贝收藏夹页面截图</p>
        <p>8.将目标商品添加到购物车，并对购物车截图</p>
    </section>
    <section>
        <ul>
            <li>
                <p>搜索结果页&nbsp;&nbsp;</p>
                <p>
                    <div class="fileBtn">
                        <p id="imgBtnp1">+</p>
                        <input id="fileBtn1" type="file" name="files" onchange="upload1();" accept="image/*" multiple="multiple"/>
                        <img src="" id="img1"/>
                    </div>
                </p>
            </li>
            <li>
                <p>店铺商品&nbsp;&nbsp;&nbsp;&nbsp;</p>
                <p>
                    <div class="fileBtn">
                        <p id="imgBtnp2">+</p>
                        <input id="fileBtn2" type="file" name="files" onchange="upload2();" accept="image/*" multiple="multiple"/>
                        <img src="" id="img2"/>
                    </div>
                </p>
            </li>
            <li>
                <p>目标商品头部</p>
                <p>
                    <div class="fileBtn">
                        <p id="imgBtnp3">+</p>
                        <input id="fileBtn3" type="file" name="files" onchange="upload3();" accept="image/*" multiple="multiple"/>
                        <img src="" id="img3"/>
                    </div>
                </p>
            </li>
            <li>
                <p>目标商品尾部</p>
                <p>
                    <div class="fileBtn">
                        <p id="imgBtnp4">+</p>
                        <input id="fileBtn4" type="file" name="files" onchange="upload4();" accept="image/*" multiple="multiple"/>
                        <img src="" id="img4"/>
                    </div>
                </p>
            </li>
            <li>
                <p>购物车</p>
                <p>
                    <div class="fileBtn">
                        <p id="imgBtnp5">+</p>
                        <input id="fileBtn5" type="file" name="files" onchange="upload5();" accept="image/*" multiple="multiple"/>
                        <img src="" id="img5"/>
                    </div>
                </p>
            </li>
        </ul>
    </section>
</article>
</form>
<!--The goods are compared to the three end-->

<!--Next step begin -->
<article class="next-step">
    <section></section>
    <section>
        <aside>
            <a id="summitBut">提交任务</a>
        </aside>
    </section>
</article>
<!--Next step end-->

<!--js-->
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/UploadImg.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/config.js"></script>
<script src="js/common.js"></script>
<script src="js/loading.js"></script>

<script>
	var orderId
	var shopName
	var copy
	$(function(){
		orderId = getUrlParam('orderId')
		console.log("当前操作任务id：" + orderId)
		$.ajax({
			url:$CONFIG.baseUrl+"/api/order/getOrderById",
			type: 'get',
			data:{orderId:orderId},
			beforeSend:function(x){
				x.setRequestHeader("Authorization", localStorage.getItem('token'))
			},
			success: function(data){
				console.log(JSON.stringify(data))
				$("#shopName").text(data.data.shopName)
				$('#goods1Pic')[0].src = $IMG_CONF+data.data.goods1Pic
				$("#goodsName").text(data.data.goodsName)
				$("#phonePrice1").text(data.data.phonePrice+"元")
				$("#phonePrice2").text(data.data.goods1RealPrice+"元")
				$("#goods1ItemNum1").text(data.data.goods1ItemNum+"件")

				$("#orderId").text(data.data.id)
				$("#keyword").text(data.data.keyword)
				copy = data.data.keyword
				$("#sortMethod").text(data.data.sortMethod)
				$("#goodsAddr").text(data.data.goodsAddr)
				// 价格区间
				if (data.data.priceMin != null || data.data.priceMax != null) {
					if (data.data.priceMin != null && data.data.priceMax != null) {
						$("#jiagequjian").text(data.data.priceMin + " - " + data.data.priceMax)
					} else if (data.data.priceMin != null) {
						$("#jiagequjian").text("最低价：" + data.data.priceMin)
					} else {
						$("#jiagequjian").text("最高价：" + data.data.priceMax)
					}
				}
				$("#levelLimit").text(data.data.levelLimit?"是":"否");
				$("#orderMsg").text(data.data.orderMsg);
				$("#remarkInfo").text(data.data.remarkInfo);
				$("#shopName").val(function(){
					return data.data.shopName.substring(0,parseInt(data.data.shopName.length/2))
				})
				if (data.data.orderImageList.length > 0) {
					data.data.orderImageList.forEach(function(image) {
					    $("#img" + image.tag).attr("src",function(){
							$("#imgBtnp" + image.tag).text("");
							$("#img" + image.tag)[0].style.display = "block";
							return $IMG_CONF+image.url
						})
					})
				}
			},
			errror: function(error){
				console.log('error')
			}
		})
	})
	
	$("#summitBut").click(function(){
		loadingOpen()
		
		console.log("提交浏览任务")
		var form = document.getElementById("imgform");
		var formdata = new FormData(form);
		$.ajax({
			url: $CONFIG.baseUrl + "/api/order/liulan/" + orderId,
			type: 'post',
			data: formdata,
			contentType:false,
			processData:false,
			beforeSend:function(x){
				x.setRequestHeader("Authorization", localStorage.getItem('token'));
			},
			success: function(data){
				console.log("OK")
				plus.nativeUI.toast(data.msg)
				loadingClose()
				window.location = "taobaoMobileMission_browse_new.html?orderId=" + orderId
			},
			error: function(error){
				console.log('error')
				loadingClose()
			}
		})
	})
	
	$("#copy").click(function(){
		copyKeyword()
	})
	function copyKeyword() {
		if(mui.os.ios){
			//ios
			var UIPasteboard = plus.ios.importClass("UIPasteboard");
		    var generalPasteboard = UIPasteboard.generalPasteboard();
		    //设置/获取文本内容:
		    generalPasteboard.plusCallMethod({
		        setValue:copy,
		        forPasteboardType: "public.utf8-plain-text"
		    });
		    generalPasteboard.plusCallMethod({
		        valueForPasteboardType: "public.utf8-plain-text"
		    });
		    mui.toast("已成功复制到剪贴板");
		}else{
			//安卓
			var context = plus.android.importClass("android.content.Context");
			var main = plus.android.runtimeMainActivity();
			var clip = main.getSystemService(context.CLIPBOARD_SERVICE);
			plus.android.invoke(clip,"setText",copy);
			mui.toast("已成功复制到剪贴板");
		}
		if (window.plus) {
			plus.runtime.openURL("taobao://taobao.com/");
		}
	}

</script>
</body>
</html>